const get = {
    msg: '成功',
    data: {
        'Bootstrap': {
            '1': {
                'url': './img/10-T3.jpg',
                'title': '全球品牌形象大使Adam Scott(亚当·斯科特)<br>穿着款新品登场！',
                'content': '商务与高尔夫球场合皆适穿',
                'position': 'center'
            },
            '2': {
                'url': './img/10-T1.jpg',
                'title': 'UNIQLO × SWEDEN ATHLETE COLLECTION<br>正在热卖中！',
                'content': 'LifeWear合作系列的出众功能性与简约之美',
                'position': 'text-start'
            },
            '3': {
                'url': './img/10-T4.jpg',
                'title': 'UNIQLO × Marimekko 2024 夏日合作系列<br>正在热卖中！',
                'content': '艺术印花 斑斓夏日',
                'position': 'text-end'
            }
        },
        'new': {
            '1': {
                'url': './img/4-T1_01.jpg',
                'title': '吸汗速干 舒适不闷汗',
                'discount': 149,
                'category': '休闲短裤',
                'activityTime': '6/14-6/20',
            },
            '2': {
                'url': './img/4-T2_01.jpg',
                'title': '高效速干 轻松摆脱汗渍',
                'discount': 79,
                'category': 'DRY-EX速干T恤',
                'activityTime': '6/21-6/27',
            },
            '3': {
                'url': './img/3-T4_01.jpg',
                'title': '柔软亲肤 舒享悠然生活',
                'discount': 79,
                'category': '全棉松紧短裤',
                'activityTime': '6/21-6/27',
            }
        },
        'Joint': {
            '1': {
                'url': './img/hhw.jpg',
                'title': `优衣库 电视动画<br>《ONE PIECE(航海王)》25周年<br>合作系列 7/8 新品登场！`,
                'content':' 一起来回顾主人公蒙奇·D·路飞的冒险之旅吧！',
            }
        },
        'consultation': {
            '1': {
                'url': './img/luoma.jpg',
                'title': '优衣库在罗马和米兰开设魅力新店<br>拓展意大利市场',
                'content': '',
                'time': 'Jun 07, 2024',

            },
            '2': {
                'url': './img/9-T3.jpg',
                'title': `优衣库赞助的“KAWS+Warhol”全球巡展`,
                'content':`本次巡展由安迪·沃霍尔博物馆策划，将延续至2027年，<br>从匹兹堡开始并在东京以及世界其他城市巡回展出`,
                'time': 'Jun 07, 2024',
            }
        },
        'question':{
            '1':{'title':'订单已付款成功多久能发货？'},
            '2':{'title':'订单商品从哪里发货？'},
            '3':{'title':'关于物流承运商目前有哪些？可以指定快递吗？'},
            '4':{'title':'为什么我的订单物流停滞/物流异常？'},
            '5':{'title':'物流承运商联络方式有哪些？'},
        }
    }
}
const {data} = get
console.log('data', data)

//轮播图渲染
function BootstrapRender() {
    let str = ''
    let num = 0
    let but = ''
    const demo = document.querySelector("[data-bs-ride=\"carousel\"]")

    for (let bootstrapKey in data.Bootstrap) {
        but += `<button type="button" data-bs-target="#demo" data-bs-slide-to="${num}"></button>`
        str += `
        <div class="carousel-item   ">
                <img src="${data.Bootstrap[bootstrapKey].url}" class="d-block" style="width:100%">
                <div class="carousel-caption ${data.Bootstrap[bootstrapKey].position}">
                    <h1>${data.Bootstrap[bootstrapKey].title}</h1>
                    <p>${data.Bootstrap[bootstrapKey].content}</p>
                    <button type="button" class="btn btn-primary ">查看更多商品</button>
                </div>
            </div>
        `
        num += 1
    }
    demo.children[0].innerHTML = but
    demo.children[1].innerHTML = str
    document.querySelectorAll('#demo .carousel-item')[0].classList.add('active')
    document.querySelectorAll('#demo [type="button"]')[0].classList.add('active')
}

BootstrapRender()

//新闻模块渲染
function newRender() {
    let str = ''
    for (let srtKey in data.new) {
        str += `
        <div class="col">
                <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"
                     style="background: url('${data.new[srtKey].url}')  center center;background-size: cover; ">
                    <div class="d-flex flex-column h-100 px-3 pb-1 text-white text-shadow-1">
                        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold text-danger">限时特优${data.new[srtKey].discount}元*起</h3>
                        <h5>${data.new[srtKey].title}</h5>
                        <ul class="d-flex list-unstyled mt-auto">
                            <li class="me-auto">
                                <button type="button" class="btn btn-primary">去购买
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         class="bi bi-arrow-right" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
                                    </svg>
                                </button>
                            </li>
                            <li class="d-flex align-items-center me-3">
                                <small>${data.new[srtKey].category}</small>
                            </li>
                            <li class="d-flex align-items-center">
                                <small><small>活动期间: ${data.new[srtKey].activityTime}*</small></small>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        `
    }
    document.querySelector('#new-cards .row').innerHTML = str
}

newRender()

function joinRender() {
    let str = ''
    for (let strKey in data.Joint) {
        str += `<div class="bg-light  rounded" style="background: url('${data.Joint[strKey].url}')  center center;background-size: cover ;  ">
            
            <div class="col-sm-8 mx-auto text-white w-100 h-100  text-end" id="joinContent"  style="padding: 5rem;">
                <h1>${data.Joint[strKey].title}</h1>
                <p>${data.Joint[strKey].content} </p>
                <p>
                    <a class="btn btn-primary" href="/docs/components/navbar/" role="button">查看更多商品»</a>
                </p>
            </div>
            </div>
       `
    }
    const join = document.querySelector('#join')
    join.innerHTML = str
}

joinRender()

consultationRender()

function consultationRender() {
    let str = ''
    let num = 0
    let name = ''
    for (let strKey in data.consultation) {
        num =  num + 1 % 2
        if(num == 1){
            name = 'order-md-2 align-items-end text-end'
        }else{
            name = ''
        }
        str += `
        <hr class="featurette-divider">
        <div class="row featurette">
            <div class="col-md-7 ${name} d-flex flex-column align-items-start">
                <h2 class="featurette-heading fw-normal lh-1"><span class="text-muted">${data.consultation[strKey].title}</span></h2>
                <p class="lead">${data.consultation[strKey].content}</p>
                    <a class="btn btn-primary mt-auto" href="/docs/components/navbar/" role="button">查看更多»</a>
                
            </div>
            <div class="col-md-5 order-md-1">
                <div class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" style="width: 500px;height: 300px; background: url('${data.consultation[strKey].url}')  center center;background-size: cover ;)"></div>
                
            </div>
            
        </div>
        `
        num += 1
    }
    str += `<hr class="featurette-divider">`
    document.querySelector('#consultation').innerHTML = str
}



function questionRender(){
    let str = ''
    for (let questionKey in data.question) {
        str +=`
        <tr>
            <th scope="row" class="text-start"><a href="javaScript;" class="text-decoration-none " >${data.question[questionKey].title}</a></th>
        <tr>
    `
    }
    document.querySelector('tbody').innerHTML = str

}
questionRender()